<template>
	<view class="flex-row-start" id="tabs">
		<text v-for="(item, index) in tabs" class="tab" :class="{'tab-selected': index === selectIndex}" @click="switchTab(index)" :key="index" :style="tabHeightStyle">{{item}}</text>
	</view>
	<view class="tab-view" :class="{'tab-view-fixed': showIfFixedTabs}">
		<slot name="tab-view" :index="selectIndex"></slot>
	</view>
	
	
	<view class="flex-row-start" :class="{'tabs-fixed': showIfFixedTabs}" :style="statusHeightStyle">
		<text v-for="(item, index) in tabs" class="tab" :class="{'tab-selected': index === selectIndex}" @click="switchTab(index)" :key="index" :style="tabHeightStyle">{{item}}</text>
	</view>
</template>

<script setup lang="ts">
	import { computed, getCurrentInstance, onMounted, ref } from 'vue';
	import { statusBarHeight } from '../../utils/utils';
import { TAB_HEIGHT } from '../../constant/constant';
	const props = defineProps({
		tabs: {
			type: Array
		},
		showIfFixedTabs: {
			type: Boolean
		}
	})
	const selectIndex = ref(0)
	const switchTab = (index: number) => {
		selectIndex.value = index
	}
	
	const emit = defineEmits(['tabsData'])
	onMounted(() => {
		const instance = getCurrentInstance()
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('#tabs').boundingClientRect((data: UniApp.NodeInfo) => {
			emit('tabsData', data)
		}).exec()
	})
	
	const statusH = statusBarHeight()
	const statusHeightStyle = computed(() => props.showIfFixedTabs ? `top: calc(100rpx + ${statusH}px)` : '')
	const tabHeightStyle = computed(() => `height: ${TAB_HEIGHT}rpx;`)
</script>
<style lang="scss" scoped>
	@import '../../styles/variable.scss';
	.tab {
		font-size: $firstFontsize;
		color: $secondaryTextColor;
		position: relative;
		cursor: pointer;
		width: 100rpx;
		text-align: center;
		margin-right: 15rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
	}
	.tab-selected {
		color: $primaryColor;
	}
	.tab-selected::after {
		content: "";
		height: 8rpx;
		width: 40rpx;
		box-sizing: border-box;
		background-color: #f9de4b;
		bottom: 15rpx;
		left: 30rpx;
		position: absolute;
		border-radius: 10rpx;
	}
	.tabs-fixed {
		position: fixed;
		background-color: white;
		width: 100vw;
	}
	.tab-view-fixed {
		
	}
</style>